<template>
  <div class="list-page">
    <div class="list-page__search" v-if="searchShow && showSearch">
      <slot name="search"></slot>
    </div>
    <div class="list-page__actions reset" v-if="showActions">
      <div class="fl">
        <slot name="actions"></slot>
      </div>
      <slot name="toolbar">
        <right-toolbar
          :search="searchIcon"
          :show-search.sync="searchShow"
          @refresh="$emit('getList', false)"
          v-if="showToolbar" />
      </slot>
    </div>
    <div class="list-page__body">
      <slot></slot>
    </div>
    <div class="list-page__footer" v-if="showPage">
      <slot name="pagination">
        <span class="left-text">{{ footerLeft }}</span>
        <pagination
          style="flex-shrink: 0"
          v-show="total > 0"
          :total="total"
          :page.sync="currentPage"
          :limit.sync="limitSize"
          @pagination="$emit('getList', false)" />
      </slot>
    </div>
  </div>
</template>

<script>
  import RightToolbar from '@/components/system/RightToolbar'
  export default {
    name: 'ListPage',
    components: { RightToolbar },
    props: {
      showSearch: { // 顶部搜索表单
        type: Boolean,
        default: true
      },
      searchIcon: { // 是否显示检索图标
        type: Boolean,
        default: true
      },
      showActions: { // 整个中间工具栏
        type: Boolean,
        default: true
      },
      showToolbar: { // 右侧工具栏
        type: Boolean,
        default: true
      },
      showPage: {  // 底部分页
        type: Boolean,
        default: true
      },
      total: {
        type: Number,
        default: 0
      },
      pageNum: {
        type: Number,
        default: 1
      },
      pageSize: {
        type: Number,
        default: 10
      },
      footerLeft: String
    },
    computed: {
      currentPage: {
        get() {
          return this.pageNum
        },
        set(val) {
          this.$emit('update:pageNum', val)
        }
      },
      limitSize: {
        get() {
          return this.pageSize
        },
        set(val) {
          this.$emit('update:pageSize', val)
        }
      }
    },
    data() {
      return {
        searchShow: true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .list-page {
    &__actions {
      margin-bottom: 8px;
      overflow: hidden;
    }

    &__footer {
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      .left-text {
        margin: 15px 15px 0 0;
        padding: 6px 0;
        line-height: 20px;
        flex-grow: 1;
      }
    }
  }
</style>
